<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>vanity jquery toolset - brought to you by the enavu network</title>
<meta name="description" content="vanity is one of the most advanced jquery plugin sets ever made. brining you jquery plugins like jSlider, jPaginate, jTabs, jSpotlight, jTip, and jPlaceholder." />
<link rel="stylesheet" type="text/css" media="screen" href="http://c.fzilla.com/1285103330-default-style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="js/jquery.js"></script>
<script src="js/custom_animations.js"></script>
<script src="js/custom_easing.js"></script>
<script src="js/jTabs.js"></script>
<script>
$(document).ready(function(){
	$("ul.tabs").jTabs({content: ".tabs_content", animate: true, cookies: true});
	$("pre.html").snippet("html",{style:"acid",transparent:true,showNum:false});
	$("pre.css").snippet("css",{style:"acid",transparent:true,showNum:false});
	$("pre.js").snippet("javascript",{style:"acid",transparent:true,showNum:false});

});
</script>
<script type="text/javascript" src="js/jsnippet.js"></script>
<link rel="stylesheet" type="text/css" href="js/jsnippet.css" />
<style>
.docs_left {float:left; width:145px;}
.docs_left ul {list-style:none; margin:0px; padding:0px;}
.docs_left ul li a {display:block; width:145px; height:37px; margin:0px; padding:0px; text-indent:-9999px;}
.docs_left ul li.jslider a {height:39px; background:url(images/slider.jpg) no-repeat left center;}
.docs_left ul li.jtabs a {background:url(images/tabs.jpg) no-repeat left center;}
.docs_left ul li.jpaginate a {background:url(images/paginate.jpg) no-repeat left center;}
.docs_left ul li.jspotlight a {background:url(images/spotlight.jpg) no-repeat left center;}
.docs_left ul li.jtip a {background:url(images/tip.jpg) no-repeat left center;}
.docs_left ul li.jplaceholder a {background:url(images/placeholder.jpg) no-repeat left center;}
.docs_left ul li.jcollapse a {background:url(images/collapse.jpg) no-repeat left center;}

.docs_left ul li a:hover, .docs_left ul li.active a {background-position:right;}


.docs_right {float:left; padding-left:25px; padding-top:15px; width:750px; background:url(images/docs_background.jpg) no-repeat;}
.docs_right .options {text-align:right; margin-bottom:10px; width:350px; float:right; padding-top:2px;}
.docs_right h1 {float:left; width:400px;}
.docs_right h3 {background-color:#fff; padding-left:10px; border-bottom:1px solid #ccc;}
.docs_right .jquery_options {list-style:none; margin:0px 0px 20px 0px; padding:0px;}
.docs_right .jquery_options li {border-bottom:1px solid #ccc; border-top:1px solid #fff; padding:5px 0px;}
.docs_right .jquery_options li:first-child {border-top:none;} .docs_right .jquery_options li:last-child {border-bottom:none;}
.docs_right .jquery_options li span {font-weight:600; font-size:1.2em; margin-right:20px;}
.docs_right .tabs_content > div {display:none;}
</style>
</head>

<body class="small">
<div class="wrap">
	<div class="header">
    	<a href="#"><img src="images/logo.png" width="204" height="71" class="left" /></a>
        <ul class="nav right">
        	<li><a href="#">home</a></li>
            <li class="active"><a href="#">documentation & demos</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">download</a></li>
        </ul><!-- nav -->
        <div class="clear"></div>
    </div><!-- header -->
    <div class="content">
    	<h2>Documentation & Demos</h2>
        <div class="docs_left">
        	<ul class="tabs">
            	<li class="jslider active"><a href="#">jSlider</a></li>
                <li class="jtabs"><a href="#">jTabs</a></li>
                <li class="jpaginate"><a href="#">jPaginate</a></li>
                <li class="jspotlight"><a href="#">jSpotlight</a></li>
                <li class="jtip"><a href="#">jTip</a></li>
                <li class="jplaceholder"><a href="#">jPlaceholder</a></li>
                <li class="jcollapse"><a href="#">jCollapse</a></li>
            </ul>
        </div><!-- docs_left -->
        <div class="docs_right">
        	<div class="tabs_content">
            
        	<!-- start jslider content div -->
            <div>
            <h1>jSlider</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;!-- the slider content holder --&gt;
&lt;div class=&quot;slider&quot;&gt;
    &lt;!-- the elements inside the slider, have as many as you want --&gt;
    &lt;div&gt;
    	&lt;a href=&quot;#&quot;&gt;
        	&lt;img src=&quot;slider_01.jpg&quot; width=&quot;600&quot; height=&quot;350&quot; border=&quot;0&quot; /&gt;
        &lt;/a&gt;
    &lt;/div&gt;   

    &lt;!-- the navigation can be placed ANYWHERE in your document --&gt;
    &lt;a href=&quot;#&quot; class=&quot;next&quot;&gt;&amp;rarr;&lt;/a&gt;
    &lt;a href=&quot;#&quot; class=&quot;prev&quot;&gt;&amp;larr;&lt;/a&gt;
&lt;/div&gt;&lt;!-- slider --&gt;
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
	$(".slider").jSlider({elem:"div"});
});         </pre>
			<p><i>optional</i> css you can use for a base</p>
            <pre class="css">
.slider {width:600px; height:350px; margin:50px auto; position:relative;}
a.next, a.prev {color:#000; background-color:#eee; border:1px solid #fff; outline:1px solid #ccc; text-shadow:-1px -1px 0px #fff; text-decoration:none; z-index:99; padding:0px 5px; display:block; }
.next {position:absolute; right:-10px; top:50%;}
.prev {position:absolute; left:-10px; top:50%;}
a.inactive {color:#ccc; background-color:#fff; border:1px solid #eee; outline:none;}
/* ul.navi is the generated navigational bullets we generate, you can disable this */
ul.navi {list-style:none; position:absolute; bottom:10px; right:5px;}
ul.navi li {float:left; margin-right:5px;}
ul.navi li a {background-color:#CCC; display:block; height:10px; width:10px; text-indent:-9999px; outline:none; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow:  0px 0px 2px  #000000;
-moz-box-shadow: 0px 0px 3px #000000;
box-shadow: 0px 0px 1px #000000; }
ul.navi li a.active {background-color:#fff;}
            </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>The slider has a wide range of options you can choose to use. For custom animation transition effects you will need to embed the custom_animations.js. For custom easing in effects you will need to embed the custom_easing.js.</p>
            <ul class="jquery_options">
                <li><span>previous_class</span> the class for the element that navigates to the previous item</li>
                <li><span>next_class</span> the class that navigates to the previous item/slide</li>
                <li><span>inactive</span> the class that will be set to the previous or next navigations when they are inactive</li>
                <li><span>elem</span> the elements inside your slider content item, this can be li's if ur slider is a ul</li>
                <li><span>animation</span> the animation is by default set to fade but if you include the custom_animations.js file you can use the following: slideDown, slideUp, slideRight, slideLeft, bounce, explode, fold, scale, random</li>
                <li><span>easing</span> by default we use swing easing but if you included the custom_easing.js file you can use the following easing: linear, swing, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce</li>
                <li><span>speed</span> the speed of the animation</li>
                <li><span>navi</span> true/false if you want to have the navigation list to shop up</li>
                <li><span>navi_active_class</span> if navi is true you can choose a class to use for the navigation's active item</li>
                <li><span>navi_class</span> if navi is true you can choose a class to use for the navigation itself</li>
                <li><span>auto_slide</span> true/false to play the slider like a slide show</li>
                <li><span>auto_slide_interval</span> time in milliseconds between slides</li>
                <li><span>auto_pause_hover</span> if auto_slide is enabled you can choose whether to pause the slider when you hover with your mouse</li>
                <li><span>click_next</span> true/false if you want to allow to go to next slide when you click on the slider</li>
                <li><span>infinite</span> true/false infinite will make the slider infinite so when you are at the last slide you can click next and go back to the first slide and the same is true for the previous button</li>
                <li><span>images</span> true/false if your slider uses an image for each slide enabling this will take that image and set it as the background of the slider so when the animation occurs it feels natural switching</li>
            </ul>
        	</div>
        	<!-- end jslider content div --> 
        
        	<!-- start jtabs content div -->
            <div>
            <h1>jTabs</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;ul class=&quot;tabs&quot;&gt;  
    &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;  
&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;tabs_content&quot;&gt;
    &lt;div&gt;Sample 1 content&lt;/div&gt;
    &lt;div&gt;Sample 2 content&lt;/div&gt;
    &lt;div&gt;Samplest content for the 3rd tabSamplest content for the 3rd tab&lt;/div&gt;
&lt;/div&gt;&lt;!-- tabs content --&gt;
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
	$("ul.tabs").jTabs({content: ".tabs_content"});
});         
			</pre>
			<p><i>optional</i> css you can use for a base</p>
            <pre class="css">
ul.tabs {list-style:none; width:500px;}
ul.tabs li:first-child {border-left:1px solid #ccc;}
ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul.tabs li.active a {font-weight:600; color:#000;}

div.tabs_content {width:500px; border:1px solid #ccc;}
div.tabs_content > div {padding:20px; display:none;} /* suggested to use display:none so that if the html is very long it wont jump badly */
            </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>The jTabs allow you to use cookies, or custom fade in effects. It also has equal height script to make the pagination jump free.</p>
            <ul class="jquery_options">
                <li><span>content</span> the element that will hold the divs with the content of each tab</li>
                <li><span>equal_height</span> true/false to enable the columns to find the highest tab and set the height across all tabs</li>
                <li><span>cookies</span> true/false will use browser cookies to store which tab the user is on</li>
                <li><span>animate</span> true/false if you would like to use an animation effect when you switch tabs</li>
                <li><span>effect</span> which animation effect would you like to use (default is fade) other option includes slide</li>
                <li><span>speed</span> if you have animation to true you can choose how long to take the effect to take place</li>
            </ul>
        	</div>
        	<!-- end jslider content div --> 
            
            <!-- start jpagination content div -->
            <div>
            <h1>jPaginate</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;div id=&quot;content&quot;&gt;  
    &lt;p&gt;1Lorem ipsum dolor sit amet, consectetur adipiscing ept.&lt;/p&gt; 
    &lt;p&gt;Vestibulum consectetur ipsum sit amet urna euismod imperdiet apquam urna laoreet.&lt;/p&gt; 
    &lt;p&gt;Curabitur a ipsum ut ept porttitor egestas non vitae pbero.&lt;/p&gt; 
    &lt;p&gt;Pellentesque ac sem ac sem tincidunt euismod.&lt;/p&gt; 
    &lt;p&gt;2Duis hendrerit purus vitae nibh tincidunt bibendum.&lt;/p&gt; 
    &lt;p&gt;Nullam in nisireet.&lt;/p&gt;   
    &lt;p&gt;Nulla sed purus et tellus convalps scelerisque.&lt;/p&gt; 
    &lt;p&gt;Nam at justo ut ante consectetur faucibus.&lt;/p&gt; 
    &lt;p&gt;Proin dapibus nisi a quam interdum lobortis.&lt;/p&gt; 
    &lt;p&gt;Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.&lt;/p&gt; 
    &lt;p&gt;Mauris auctor suscipit tellus, at sodales nisi blandit sed.Lorem ipsum dolor sit abitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. &lt;/p&gt; 
&lt;/div&gt;  
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
	$("#content").jPaginate(); 
});         
			</pre>
			<p><i>optional</i> css you can use for a base</p>
            <pre class="css">
#content {width:500px;}
/* the following code is to style the generated pagination navigation system */
.pagination {list-style:none; margin:10px 0px 0px 0px; padding:0px; clear:both;}
.pagination li {float:left; margin:3px;}
.pagination li a{   display:block; padding:3px 5px; color:#fff; background-color:#44b0dd; text-decoration:none;}
.pagination li a.active {border:1px solid #000; color:#000; background-color:#fff;}
.pagination li a.inactive {background-color:#eee; color:#777; border:1px solid #ccc;}
            </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>jPagination is filled with great little options to make the experience full of enhancements. For example you can set equal height to true to disable any jumping from the difference in height of pages. You can also enable cookies and have the users selected page be pre-selected when they refresh or come back to the page.</p>
            <ul class="jquery_options">
                <li><span>items</span> number of items to have per page on pagination</li>
                <li><span>next</span> the text you want to have inside the text button</li>
                <li><span>previous</span> the text you want in the previous button</li>
                <li><span>active</span> the class you want the active paginaiton link to have</li>
                <li><span>pagination_class</span> the class of the pagination element that is being generated for you to style</li>
                <li><span>minimize</span> minimizing will limit the overall number of elements in the pagination links</li>
                <li><span>nav_items</span> when minimize is set to true you can specify how many items to show</li>
                <li><span>cookies</span> if you want to use cookies to remember which page the user is on, true by default</li>
                <li><span>position</span> specify the position of the pagination, possible options: "before", "after", or "both"</li>
                <li><span>equal</span> implements an equal height main element by using the highest possible element use true false</li>
                <li><span>offset</span> unfortunately calculating heights with javascript isn't always 100% accurate, so please use this value to make it perfect :) its defaultly set to 50</li>
            </ul>
        	</div>
        	<!-- end jpagination content div -->    
            
            <!-- start jspotlight content div -->
            <div>
            <h1>jSpotlight</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;ul class=&quot;parent&quot;&gt;
	&lt;li&gt;&lt;img src=&quot;one.jpg&quot; width=&quot;300&quot; height=&quot;250&quot; title=&quot;Such a pretty photo!&quot; /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src=&quot;two.jpg&quot; width=&quot;300&quot; height=&quot;250&quot; title=&quot;Even prettier!&quot; /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src=&quot;three.jpg&quot; width=&quot;300&quot; height=&quot;250&quot; title=&quot;Simpler and more information cna be handled here&quot; /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src=&quot;four.jpg&quot; width=&quot;300&quot; height=&quot;250&quot; title=&quot;short&quot; /&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;!-- parent --&gt;
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
	$(".parent").jSpotlight({title_effect: "slide"});
});         
			</pre>
			<p><i>optional</i> css you can use for a base</p>
            <pre class="css">
.parent {list-style:none; margin:0px; padding:0px;}
.parent li {float:left; margin:10px; border:5px solid #eee; width:300px; height:250px; position:relative;}
.parent li.active {border:5px solid #000;}
.parent li.inactive {border:5px solid #ccc; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.parent li .title {position:absolute; bottom:0px; left:0px; right:0px; padding:5px; background-color:#000; color:#fff; text-align:center;}
            </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>jSpotlight is the real jewel of vanity in the whole set of plugins. It allows you to create beautiful spotlight effect in a series of images or just elements.</p>
            <ul class="jquery_options">
                <li><span>active</span> the class for the element that is currently hovered over</li>
                <li><span>inactive</span> the class for the elements that are not hovered over when the main element is active</li>
                <li><span>attr</span> the attribute inside the img to take the information for the title</li>
                <li><span>title_class</span> the class of the title div which you can style</li>
                <li><span>title_effect</span> the effect the title will have appearing and dissapearing, possible: slide, fade, default</li>
                <li><span>title_speed</span> specify the speed of the effect in milliseconds or use slow/fast in quotes so like "slow"</li>
                <li><span>title</span> here you can enable or disable the title effect by passing in true or false</li>
            </ul>
        	</div>
        	<!-- end jspotlight content div -->    
        	
            <!-- start jtip content div -->
            <div>
            <h1>jTip</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;a href=&quot;#&quot; class=&quot;tip&quot; title=&quot;jTip And something longer will go here&quot;&gt;Simple Tip&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;tip&quot; title=&quot;Something else in here!&quot;&gt;Simple Tip 2&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;tip&quot; title=&quot;This is the greatest tip plugin EVER! Seriously :)&quot;&gt;Longer text&lt;/a&gt;
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
	$(".tip").jTip();
});         
			</pre>
			<p><i>optional</i> css you can use for a base</p>
            <pre class="css">
.tip_window {
	padding:5px; 
	width:200px;
	border:1px solid #fff;
	background-color:#000; 
	color:#fff; 
	text-align:center;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px; 
	-webkit-box-shadow: 1px 1px 3px #6e6d6e;
	-moz-box-shadow: 1px 1px 3px #6e6d6e;
	box-shadow: 1px 1px 3px #6e6d6e; 
}
            </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>jTip is a super simple tip plugin, it's so simple we only have 4 options to use. Which attribute, that class for the tip, and the coordinates away from the element. That easy!</p>
            <ul class="jquery_options">
                <li><span>attr</span> the attribute you want to pull the content from</li>
                <li><span>tip_class</span> the class you want to style for the tip, make sure to have a width when styling</li>
                <li><span>y_coordinate</span> the distance from the mouse the tip will show in the vertical direction</li>
                <li><span>x_coordinate</span> the distance from the mouse the tip will show in the horizontal direction</li>
            </ul>
        	</div>
        	<!-- end jtip content div -->
            
            
            <!-- start jtip content div -->
            <div>
            <h1>jPlaceholder</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;form method=&quot;get&quot; action=&quot;#&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;something simple...&quot; name=&quot;simple&quot; class=&quot;placeholder&quot; /&gt;
&lt;input type=&quot;submit&quot; /&gt;
&lt;/form&gt;
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
	$("input:text").jPlaceholder({css_class: "placeholder"});
});         
			</pre>
			<p><i>optional</i> css you can use for a base</p>
            <pre class="css">
.placeholder {color:#888;  font-style:italic;}
            </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>jPlaceholder brings the functionality of the html5 placeholder in all browsers!</p>
            <ul class="jquery_options">
                <li><span>css_class</span> allows you to specify the class for the placeholder text</li>
            </ul>
        	</div>
        	<!-- end jtip content div -->
            
            <!-- start jcollapse content div -->
            <div>
            <h1>jCollapse</h1>
            <div class="options">
            	<a href="#"><img src="images/stand_alone_demo.png" width="197" height="29" alt="stand alone demo" /></a> <a href="#"><img src="images/download.png" width="137" height="29" title="download" /></a>
            </div><!-- options -->
            <div class="clear"></div>
            <h3>Code Examples</h3>
            <p>html code needed</p>
            <pre class="html">
&lt;a href=&quot;#&quot; class=&quot;collapse&quot; rel=&quot;#collapsibleElement&quot;&gt;Expand&lt;/a&gt;
&lt;div id=&quot;collapsibleElement&quot;&gt;
	Test Content Number 1
&lt;/div&gt;
            </pre>
            <p>javascript code needed</p>
            <pre class="js">
$(document).ready(function(){
    $(".collapse").jCollapse({effect: "fade"});                       
});       </pre>
            <br /><br />
            <h3>Documentation</h3>
            <p>The collapse is very easy to use with only a few options to modify.</p>
            <ul class="jquery_options">
                <li><span>expand_text</span> enter the text you want the link to contain before the user has expanded the elements default is "expand"</li>
                <li><span>collapse_text</span> the text you want after the user expands the element(s) default is "Collapse" (commonly you can use More and Less)</li>	
                <li><span>effect</span> this will be the effect that will change the way the new element/s show up, available options are: display, slide, fade	</li>
            </ul>
            </div>
            <!-- end jcollapse content div -->
        	</div><!-- tabs_content -->
        </div><!-- docs_right -->
        <div class="clear"></div>
    </div><!-- content -->
    <div class="footer">
    	all rights reserved &copy; the <a href="http://www.enavu.com">enavu network</a>
    </div><!-- footer -->
</div><!-- wrap -->
</body>
</html>
